<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        :inline="true"
        :model="queryParams"
        @submit.native.prevent
        ref=" queryParams"
        label-width="65px"
      >
        <el-form-item label="系统名称" prop="alarmSysName">
          <common-input
            v-model="queryParams.alarmSysName"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="系统编码" prop="systemCode">
          <common-input
            v-model="queryParams.systemCode"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="厂商编码" prop="manuCode">
          <common-input
            v-model="queryParams.manuCode"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>
      </el-form>
    </common-search>
    <div slot="tools">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        @click="add"
        data-test="system_name-button-add"
        v-hasPermi="['config:product:add']"
        >新增
      </el-button>
      <el-button
        plain
        type="danger"
        icon="el-icon-delete"
        :disabled="!showBatch"
        @click="handleDelete()"
        v-hasPermi="['config:product:remove']"
        >批量删除
      </el-button>
    </div>
    <common-table
      v-loading="isLoading"
      slot="content"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="系统名称"
        prop="alarmSysName"
        align="left"
        show-overflow-tooltip
      />
      <el-table-column label="系统编码" prop="systemCode" align="left" />
      <el-table-column label="厂商编码" prop="manuCode" align="left" />
      <el-table-column
        label="备注"
        prop="remark"
        align="left"
        show-overflow-tooltip
      />
      <el-table-column label="操作" align="left" width="90px">
        <template slot-scope="scope">
          <!-- <el-button
            type="text"
            @click="getInfo(scope.row)"
            >详情</el-button
          > -->
          <el-button
            type="text"
            data-test="system_name-button-edit"
            @click="edit(scope.row)"
            v-hasPermi="['config:product:edit']"
            >编辑
          </el-button>
          <el-button
            type="text"
            data-test="system_name-button-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['config:product:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <common-edit-dialog
      :title="isEdit ? '编辑系统名称' : '新增系统名称'"
      :visible="isDialog"
      :button-loading="buttonLoading"
      @cancel="cancel"
      @submit="submitForm"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-row :gutter="18">
          <el-col :span="24">
            <el-form-item label="系统名称" prop="alarmSysName">
              <common-input
                v-model="form.alarmSysName"
                clearable
                :maxlength="16"
                data-test="system_name-input-alarmSysName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="系统编码" prop="systemCode">
              <common-input
                v-model="form.systemCode"
                clearable
                placeholder="示例：请输入( 0-F )2位数"
                :maxlength="2"
                data-test="system_name-input-systemCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="厂商编码" prop="manuCode">
              <el-select
                v-model="form.manuCode"
                filterable
                data-test="system_name-input-manuCode"
                default-first-option
                clearable
              >
                <el-option
                  v-for="item in manuCodeList"
                  :label="item.manuCode"
                  :value="item.manuCode"
                  :key="item.id"
                  data-test="system_name-li-option"
                >
                  <CommonOptionSpan
                    :date="{
                      left: item.manuCode,
                      right: item.corporateName,
                    }"
                  ></CommonOptionSpan>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <common-input
                v-model="form.remark"
                type="textarea"
                data-test="system_name-input-remark"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </common-edit-dialog>
    <!-- <common-info-dialog
      :title="detailsTitle"
      @cancel="cancel"
      :visible.sync="detailsOpen"
    >
      <common-info-table>
        <common-info-table-cell label="系统名称"
          >{{ form.alarmSysName }}
        </common-info-table-cell>
        <common-info-table-cell label="系统编码"
          >{{ form.systemCode }}
        </common-info-table-cell>
        <common-info-table-cell label="厂商编码"
          >{{ form.manuCode }}
        </common-info-table-cell>
        <common-info-table-cell label="备注"
          >{{ form.remark }}
        </common-info-table-cell>
      </common-info-table>
    </common-info-dialog> -->
  </common-list>
</template>

<script>
import {
  getInfoProduct,
  addProduct,
  editProduct,
  getProductCodesProduct,
  listProduct,
  removeProduct,
  deleteForCheck,
} from "@/api/system/product";
import { getVendorsList } from "@/api/system/vendors";
import BaseList from "@/mixins/BaseList";

export default {
  name: "product",
  mixins: [BaseList],
  data() {
    const checkPath = (rule, value, callback) => {
      const path = new RegExp("^[0-9A-F]{2}$");
      if (path.test(value)) {
        callback();
      } else {
        callback(new Error("请输入( 0-F )2位数"));
      }
    };
    return {
      // detailsTitle: "",

      isDialog: false,
      isEdit: false,
      total: 0,
      // detailsOpen: false,
      list: [],
      isLoading: false,
      buttonLoading: false,
      manuCodeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        alarmSysName: "",
        manuCode: "",
        systemCode: "",
      },
      form: {
        alarmSysName: "",
        manuCode: "",
        systemCode: "",
        remark: "",
      },
      rules: {
        alarmSysName: [
          { required: true, message: "请输入系统名称", trigger: "blur" },
        ],
        manuCode: [
          { required: true, message: "请选择厂商编码", trigger: "blur" },
        ],
        systemCode: [
          { required: true, message: "请输入系统编码", trigger: "blur" },
          { required: true, validator: checkPath, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // getInfo(id) {
    //   this.detailsOpen = true;
    //   this.detailsTitle = "系统详情";
    //   getInfoProduct(id).then((res) => {
    //     this.form = res.data;
    //   });
    // },
    getList() {
      this.isLoading = true;
      listProduct(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
    resetForm() {
      this.form = {
        alarmSysName: "",
        manuCode: "",
        systemCode: "",
        remark: "",
      }
    },
    // 新增
    add() {
      this.resetForm("form");
      this.isEdit = false;
      this.isDialog = true;
    },
    edit(info) {
      this.isEdit = true;
      this.isDialog = true;
      this.form = {
        id: info.id,
        alarmSysName: info.alarmSysName,
        manuCode: info.manuCode,
        systemCode: info.systemCode,
        remark: info.remark
      }
    },
    cancel() {
      this.detailsOpen = false;
      this.isDialog = false;
      this.resetForm("form");
    },
    deleteData(row) {
      const ids = row?.id || this.ids.join(",");
      this.$GlobalDeleteConfirm().then(() => {
        removeProduct({ ids }).then((res) => {
          if (res && res.code === 200) {
            this.$GlobalSuccessMessage("删除成功");
            if (
              this.queryParams.pageNum > 1 &&
              ids.split(",").length === this.list.length
            ) {
              this.queryParams.pageNum -= 1;
            }
            this.getList();
          } else {
            this.$GlobalErrorConfirm("删除失败", res.msg);
          }
        });
      }).catch(()=>{});
    },
    /**  删除前校验 */
    beforeDeleteForCheck(ids) {
      console.log("ids====>", ids);
      return new Promise((resolve, reject) => {
        deleteForCheck({ ids: ids })
          .then((res) => {
            if (res && res.code === 200) {
              resolve(res);
            } else {
              reject(res);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.isEdit) {
            editProduct(this.form)
              .then((res) => {
                console.log(res.msg);
                if (res && res.code == 200) {
                  this.$GlobalSuccessMessage("编辑成功");
                  this.isDialog = false;
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addProduct(this.form)
              .then((res) => {
                if (res && res.code == 200) {
                  this.$GlobalSuccessMessage("新增成功");
                  this.isDialog = false;
                  this.getList();
                } else {
                  this.$GlobalErrorConfirm("新增失败", res.msg);
                }
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    getManuCodeList() {
      getVendorsList().then((res) => {
        this.manuCodeList = res.rows;
      });
    },
  },

  mounted() {
    this.getList();
    this.getManuCodeList();
  },
};
</script>
